{include file="public/head"/}
<link rel="stylesheet" href="__PUBLIC__phone/css/business.css"/>
<body>
<!--头部-->
<header id="headers">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <a href="javascript:;" class="leftRuted glyphicon glyphicon-menu-left pull-left" ></a>
                <p>业务续费</p>
            </div>
        </div>
    </div>
</header>
<!-- 业务续费-续费 -->
<div class="business normalBox">
    <div class="container businwrap">
        <ul class="renUls">
            <li>
                <span class="renls">ICCID：</span>
                <span class="renrs">{$iccid}</span>
            </li>
            <li>
                <span class="renls">套餐规格：</span>
                <span class="renrs"><i>{$card.operator_type}</i> <i>{$card.total}/{$card.pkg_kind_text}</i> <i>￥{$card.pkg_price}元</i></span>
            </li>
            <li>
                <span class="renls">续费周期：</span>
                {if condition="$card['pkg_kind'] eq '0'"}
                <div class="cycle">
                    {volist name="card.renew_type" id="re" key="k"}
                    <div data-cycle="{$re.cycle}" {if condition="$k eq '1'"} class="cywrap active" {else/} class="cywrap" {/if}>
                        <p>{$re.cycle}个月</p>
                        <p>￥{$re.price}</p>
                        <span class="tri"></span>
                    </div>
                    {/volist}
                </div>
                {else/}
                <span class="norspan"> * 跨月套餐默认续费一周期</span>
                {/if}
            </li>
            <li>
                <span class="norspan">应付金额(元):</span>
                {if condition="$card['pkg_kind'] eq '0'"}
                <span class="norspan" id="payable">￥{$card.renew_type[0]['price']}</span>
                {else/}
                <span class="norspan" id="payable">￥{$card.pkg_price}</span>
                {/if}
            </li>
            <li>
                <span class="norspan">账户余额(元):</span>
                <span  class="norspan">￥{$balance}</span>
            </li>
            <li>
                <a class="sure" data-toggle="modal">确定</a>
            </li>
        </ul>
    </div>
</div>
<!--弹出层-->
<div class="modal fade" id="renewModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body text-center">
                <img src="__PUBLIC__phone/images/yes.png" alt=""/>
                <p>续费成功</p>
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        // 选择续费周期
        $(".cycle").on('click','.cywrap',function(){
            $(this).addClass("active").siblings(".cywrap").removeClass("active");
            $('#payable').text($(this).find('p:last').text());
        })

        // 确定续费
        $('.renUls').on('click','.sure',function(){
            var iccid = "<?php echo $iccid; ?>";
            var type = "<?php echo $card['pkg_kind']; ?>";
            var cycle = 1;
            if(type == '0'){
                cycle = $('.cycle').find('.active').data('cycle');
            }
            if(!/^[1-9]+$/.test(cycle)){
                reminder('请选择续费周期');
                return false;
            }
            $.post("{:url('/home/Renew/confirmRenew')}",{'iccid':iccid,'cycle':cycle},function(data){
                if(data.code == '0'){
                    $('.modal-body p').text(data.msg);
                    $('#renewModal').modal('show');
                } else {
                    reminder(data.msg);
                }
            })
        })

        // 弹窗完全隐藏的后触发
        $('#renewModal').on('hidden.bs.modal',function(){
            window.location.href = "{:url('/home/Renew/index')}";
        })

    })
</script>
</body>
</html>